/**
 * 验证码设置
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="margin-t10">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>验证码设置</el-breadcrumb-item>
    </el-breadcrumb> 
    <div class="boxBlock"> 
         <div style="min-height: 600px;"> 

          <div class="col1" v-for="i in listData"  :key="i.id"> 
            <el-checkbox :label="i.name" :true-value="1" :false-value="0" v-model="i.verify" :disabled="i.forces==='1'?true:false"  @change="changeChoose" /> 
          </div> 
        </div> 
        <div  class="dialog-footer">  
            <el-checkbox v-model="checkedIs" style="padding: 0 20px;" @change="clickChoose">全选</el-checkbox>
             
            <el-button
              size="small"
              type="primary"
              :loading="loading"
              class="title"
              @click="openSure"
            >提交</el-button
            >
        </div>  
     </div> 
     <codeChoose ref="codeRef" @setParam="getParam"></codeChoose> 
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
  timestampToTime,
  spStr,
} from "../../utils/util";
import {
  baseURL,
  req,
  reqJson,
  encrypt,
  decrypt,
  reqtoken,
  service,
  format,
  getUrl,
} from "../../api/axiosFun"; 
import codeChoose from '@/components/codeChoose.vue' 
export default {
  data() {
    return { 
      loading: false,  
      b: format,
      timestampToTime: timestampToTime, 
      listData: [], //用户数据
      userInfo:{},
      checkedIs:false, 
    };
  },
  // 注册组件
  components: { 
    codeChoose
  },
  created() {
    if (this.$store.state.user) {
      this.userInfo = JSON.parse(this.$store.state.user);
    } else {
    
    }
    this.getdata(); 
  },
  computed: {
    ...mapGetters(["getUser"]),
    ...mapGetters(["getcInfo"]),
 
  },
  watch: {
    getUser(newVal) {
      this.userInfo = JSON.parse(newVal);
    },
    listData(){
      if(this.listData.filter(item=>{ item.verify==true }).length ==this.listData.length){
        // this.checkedIs = true
      }else{
        // this.checkedIs = false
      } 
    },
 
  },
 
  methods: {  
    changeChoose(e){ 
      if(e==false){
        this.checkedIs = false
      }
    },
    clickChoose(){ 
      // this.checkedIs = !this.checkedIs
      if(this.checkedIs){
        this.listData = this.listData.map(item=>{
          return{
            ...item,
              verify:true
            }
        }) 
      }else{
        this.listData = this.listData.map(item=>{
          return{
            ...item,
              verify:item.forces==='1'?true:false
            }
        })
      }
      
    },
    getdata() { 
      let arr = []
      if(this.userInfo&&this.userInfo.verify){
        arr =  this.userInfo.verify.split(',');
      } 
 
      let url = '/api/admin/getVerifyCodeList' 
      if(this.userInfo&&(this.userInfo.userType == '01' || this.userInfo.userType=='02')){
        url = '/api/photon/getVerifyCodeList' 
      } 

       service
        .get(url).then((res) => {
          this.loading = false;
          if (res.code == 0) {   
            this.listData = res.data.map(item=>{  
              return{
                ...item,
                verify:item.forces==='1'||arr.map(Number).includes(item.id)?true:false  
              }
            })
          } else {
            // this.$message({
            //   type: "info",
            //   message: spStr(res.msg, "PhotonPay", ""),
            // });
          }
        })
        .catch((err) => {
          this.loading = false;
          // this.$message.error(spStr(err, "PhotonPay", ""));
        });
    }, 
    getParam(val){ 
      this.submitForm(val)
    },
    openSure(){
      this.$refs.codeRef.openDialog(); 
    },
   
    submitForm(val) {   
      this.loading = true;
      let ids = []
       this.listData.forEach(item=>{
        if(item.verify){
          ids.push(item.id)
        }
        // return{
        //   id:item.id,
        //   verify:item.verify?1:0
        // }
      }) 
      let url = '/api/admin/editVerifyCode' 
      if(this.userInfo&&(this.userInfo.userType == '01' || this.userInfo.userType=='02')){
        url = '/api/photon/editVerifyCode' 
      } 
      // console.log(val,'999999') 
      reqJson("post", url,  {
          ids:ids
        },{
          headers:{
              ...val
          }
        })
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.$message.success(res.msg);  
            // this.addForm = res.data;  
            reqJson("get", "/api/photon/getUserInfo", {})
            .then((res) => { 
              if (res.code == 0) { 
                this.$store.commit("user", JSON.stringify(res.data));
              } else {
                this.$message({
                  type: "info",
                  message: res.msg,
                });
              }
            })
            .catch((err) => {}); 
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          } 
        })
        .catch((err) => {
          // this.$message.error(spStr(err, "PhotonPay", ""));
          this.$message({
              type: "error",
              message:err,
            });
      }); 
    },
  
 
  },
};
</script>

<style scoped>
.boxBlock{ 
  /* min-height: 700px; */
}
.boxBlock .col1{
  width: 25%;
  display: inline-block;
  padding: 10px 0;
}
.dialog-footer{
  text-align: center;
}
  
</style>

 
 